<template>
  <el-container class="warp-content">
    <el-main>
      <Banner
        :title="`当前位置：${title}`"
        :desc="desc"
        bg-img="bg2.svg"
        bg-size="260"
      />
      <!-- 处于分类首页 -->
      <div class="category-main" v-if="isIndex">
        <div class="category-item" v-for="item in blogList" :key="item.blogId">
          <h2
            class="category-name"
            v-if="item.blogs.length !== 0"
            v-text="`${item.category.title}`"
          >
            分类标题
          </h2>
          <!-- 博客列表 -->
          <router-link
            class="blog-view"
            v-for="blog in item.blogs"
            :key="blog.blogId"
            :to="`/blog/${blog.blogId}`"
          >
            <p class="blog-title" v-text="blog.title">博客标题</p>
            <span class="time">{{ blog.createdAt.substring(0, 10) }}</span>
          </router-link>
        </div>
      </div>

      <!-- 不是分类首页的渲染 -->
      <div class="category-main" v-if="!isIndex">
        <div class="category-item">
          <h2
            class="category-name"
            v-text="blogListCate.length !== 0 ? category.title : '暂无内容'"
          >
            分类标题
          </h2>
          <!-- 博客列表 -->
          <router-link
            class="blog-view"
            v-for="blog in blogListCate"
            :key="blog.blogId"
            :to="`/blog/${blog.blogId}`"
          >
            <p class="blog-title" v-text="blog.title">博客标题</p>
            <span class="time">{{ blog.createdAt.substring(0, 10) }}</span>
          </router-link>
        </div>
      </div>
    </el-main>
    <el-aside><Category /></el-aside>
  </el-container>
</template>

<script>
import Banner from "@/components/frontend/Banner";
import Category from "@/components/frontend/CategoryAside";
export default {
  name: "category",
  components: { Banner, Category },
  data() {
    return {
      // 全部分类首页
      blogList: [],
      title: "分类标题",
      desc: "分类描述",
      isIndex: false,
      // 某个分类页
      categoryId: 0,
      category: {},
      blogListCate: [],
      total: ""
    };
  },
  created() {
    this.getBlogByCheck();
  },
  methods: {
    /**
     * 分情况获取博客数据
     */
    getBlogByCheck() {
      if (this.checkIndex()) {
        this.isIndex = true;
        this.getBlogsGroupByCategory();
      } else {
        this.categoryId = this.$route.query.id;
        this.isIndex = false;
        this.getBlogsByCategoryId();
        this.getCategory();
      }
    },
    /**
     * 获取所有分类下的博客
     */
    async getBlogsGroupByCategory() {
      const { data: res } = await this.$api.webApi.getBlogsGroupByCategory();
      console.log(res);
      this.blogList = res.data;
      this.title = "全部分类";
      this.desc = "分类归档";
    },

    /**
     * 获取某个分类下的博客
     */
    async getBlogsByCategoryId() {
      const { data: res } = await this.$api.webApi.getBlogsByCategoryId(
        this.categoryId
      );
      console.log(res);
      this.blogListCate = res.data;
    },
    /**
     * 获取分类详情
     */
    async getCategory() {
      const categoryId = this.categoryId;
      const { data: res } = await this.$api.webApi.getCategoryById(categoryId);
      console.log(res);
      this.category = res.data;
      this.title = res.data.title;
      this.desc = res.data.desc;
    },
    /**
     * 检查是否在分类首页
     */
    checkIndex() {
      return this.$route.query.id === undefined;
    }
  },
  watch: {
    $route() {
      this.getBlogByCheck();
    }
  }
};
</script>
<style lang="scss" scoped>
.category-main {
  width: 760px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  margin-top: 20px;
  padding: 40px;

  .category-item {
    margin-top: 20px;
  }

  .category-name {
    font-size: 20px;
    color: #000;
    margin-bottom: 20px;
  }

  .blog-view {
    padding: 0 20px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    cursor: pointer;
    color: $text-level-1;
    font-size: 16px;
    &:hover {
      background: #f8f9fa;
      color: #30a9de;
    }
    .blog-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 16px;
    }
    .time {
      width: 100px;
    }
  }
}

.el-aside {
  margin-top: 20px;
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 960px) {
  .category-main {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .category-main {
    padding: 20px;

    .blog-view {
      padding: 0;
    }
  }
}
</style>
